<template>
  <div class="app-container">
    <div class="filter-container">
      <span style="color: #ccc; font-size: 13px;position: relative; bottom: 4px;">发生时间：</span><el-date-picker
        style="margin-right: 10px; position: relative; bottom: 4px;"
        v-model="listQuery.complaintTime"
        value-format="yyyy-MM-dd HH:mm:ss"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="['00:00:00', '23:59:59']">
      </el-date-picker>
      <el-input v-model="listQuery.phone" placeholder="投诉人" style="width: 200px;margin-right: 10px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索 
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投诉人" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投诉原因" min-width="150px">
        <template slot-scope="{row}">
          <el-tag>{{ row.author }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="投诉时间" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="投诉内容" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.author }}</span>
        </template>
      </el-table-column>
      <!-- 回复内容 -->
      <el-table-column label="处理结果" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.author }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            回复
          </el-button>
          <el-button style="margin-right: 10px;" size="mini" @click="handleDetail(row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form v-if="dialogStatus === 'update'" ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="110px" style="width: 400px; margin-left:50px;">
        <el-form-item prop="remark">
          <el-input placeholder="回复" type="textarea" :autosize="{ minRows: 4, maxRows: 6}" show-word-limit maxlength="200" v-model="temp.remark"></el-input>
        </el-form-item>
      </el-form>
      <div v-if="dialogStatus === 'detail'" class="detail">
        <div style="width: 50%;"><el-label label="投诉人" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="投诉原因" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="投诉内容" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="给出建议" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="投诉时间" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="备注" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="回复内容" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="状态" value="ces"></el-label></div>
        <div style="width: 50%;"><el-label label="附件" value=""></el-label></div>
        <div style="width: 100%">
          <el-image 
            style="width: 100px; height: 100px"
            :src="url" 
            :preview-src-list="srcList">
          </el-image>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button v-if="dialogStatus!=='detail'" type="primary" @click="updateData()">
          确定
        </el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="dialogPvVisible" title="Reading statistics">
      <el-table :data="pvData" border fit highlight-current-row style="width: 100%">
        <el-table-column prop="key" label="Channel" />
        <el-table-column prop="pv" label="Pv" />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false">Confirm</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { fetchList, fetchPv, cfreateArticle, updateArticle } from '@/api/article'
import waves from '@/directive/waves' // waves directive
import { parseTime } from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import ElLabel from '@/components/ElLabel'
import {carType, floor, build, houseStatus, yesOrNot} from '@/utils/dic-data'

const calendarTypeOptions = [
  { key: 'CN', display_name: 'China' },
  { key: 'US', display_name: 'USA' },
  { key: 'JP', display_name: 'Japan' },
  { key: 'EU', display_name: 'Eurozone' }
]


export default {
  name: 'Complaint',
  components: { Pagination, ElLabel },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'info',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      startMonth: null, // 开始月份
      endMonth: null, // 结束月份
      saleMonth: 1,
      build,
      floor,
      carType, 
      yesOrNot,
      isDetail: false,
      houseStatus,
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        // type: undefined,
        // sort: '+id'
        complaintTime: [],
      },
      importanceOptions: [1, 2, 3],
      calendarTypeOptions,
      // sortOptions: [{ label: 'ID Ascending', key: '+id' }, { label: 'ID Descending', key: '-id' }],
      // statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id: undefined,
        salePrice: 0, // 车位出售费用
        remainingCost: 0, //剩余车位费
        parkingType: '', // 车位类型
        parkingName: '', // 车位名称
        parkingStatus: 0,// 车位状态 0、闲置；1、已出租；2、已出售; 3、已预定 ,
        parkingCode: '', // 车位编码
        paidFees: '',// 已缴纳车位费
        monthlyRent: 210, // 月租金
        houseHoldId: '', // 所属用户
        hasChargingStation: 0, // 0 无
        chargingStationNum: 1,
        saleTime: [],
        allPrice: 0, // 总费用租车
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '回复',
        detail: '投诉详情',
      },
      dialogPvVisible: false,
      pvData: [],
      rules: {
        remark: [{ required: true, message: '请输入回复内容', trigger: 'change' }]
      },
      downloadLoading: false
    }
  },
  created() {
    this.defaultDate()
    this.getList()
  },
  methods: {
    defaultDate(){
      const end = new Date()
      const start = new Date()
      const dayOfThisMon = end.getDate(); // 获取当前日（1-31）
      start.setTime(start.getTime() - (3600 * 1000 * 24 * (dayOfThisMon-1)))
      this.listQuery.complaintTime = [start, end] //将值设置给插件绑定的数据
    },
    getList() {
      this.listLoading = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    sortChange(data) {
      const { prop, order } = data
      if (prop === 'id') {
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending') {
        this.listQuery.sort = '+id'
      } else {
        this.listQuery.sort = '-id'
      }
      this.handleFilter()
    },
    resetTemp() {
      this.temp = {
        remark: '',
      }
    },
    // 详情
    handleDetail () {
      this.dialogStatus = 'detail'
      this.dialogFormVisible = true
    },
    // 处理投诉
    handleUpdate (row) {
      this.resetTemp()
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const tempData = Object.assign({}, this.temp)
          tempData.timestamp = +new Date(tempData.timestamp) // change Thu Nov 30 2017 16:41:05 GMT+0800 (CST) to 1512031311464
          updateArticle(tempData).then(() => {
            const index = this.list.findIndex(v => v.id === this.temp.id)
            this.list.splice(index, 1, this.temp)
            this.dialogFormVisible = false
            this.$notify({
              title: 'Success',
              message: 'Update Successfully',
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort
      return sort === `+${key}` ? 'ascending' : 'descending'
    }
  }
}
</script>
<style scoped>
  .pop-btn {
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    cursor: pointer;
  }
  .detail {
    display: flex;
    flex-wrap: wrap;
  }
</style>
